<template>
	<view class="page-view">
		<view class="top">
			<u-navbar :title="stepList[step].title" :background="{
						backgroundColor: 'transparent'
					}" :border-bottom="false" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>

			<view class="steps-box">
				<u-steps :list="stepList" :current="step" :active-color="$appConfig.mainColor"></u-steps>
			</view>
		</view>

		<view class="bg-white u-p-30 u-m-t-30">
			<view class="u-font-34 font-medium u-m-b-30">退款进度</view>
			<u-read-more ref="uReadMore" :toggle="true" :show-height="200" close-text="查看完整进度" color="#999999" font-size="24"
				text-indent="0">
				<view class="u-m-l-30">
					<u-time-line>
						<u-time-line-item v-for="(item,index) in refundStatus" :key="index">
							<template v-slot:node>
								<view class="u-node" :style="{background:index==0? '#19be6b':'#ddd'}"></view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-font-24" :class="[index==0?'black':'u-light-color']">{{item.change_message}}</view>
									<view class="u-font-22 u-light-color">{{item.change_time}}</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</u-read-more>
		</view>

		<view class="u-m-t-30 u-p-30 bg-white">
			<view class="u-font-34 font-medium u-m-b-30">退款明细</view>
			<view class="u-m-b-20"><text class="font-medium u-font-30 u-m-r-10">退款去向</text> <text
					class="u-font-22 u-light-color">(原路返回)</text></view>
			<view class="">
				<text class="price u-type-primary u-font-36"
					:class="orderDetail.order_info.refund_status==2?'':''">{{orderDetail.order_info.pay_price}}</text>
				<text class="u-m-l-10 u-light-color"
					v-if="orderDetail.order_info.refund_time">(预计{{orderDetail.refund_time}}可到账)</text>
			</view>
		</view>
		<view class="u-p-b-40">
			<u-cell-group :border="false">
				<u-cell-item title="订单名称" :arrow="false" :value="orderDetail.title||''"></u-cell-item>
				<u-cell-item title="订单金额" :arrow="false" :value="orderDetail.refund_price||''"></u-cell-item>
				<u-cell-item title="付款时间" :arrow="false" :value="orderDetail.pay_time||''"></u-cell-item>
				<u-cell-item title="订单号" :arrow="false" :value="orderDetail.order_id||''"></u-cell-item>
				<u-cell-item title="退款原因" :arrow="false" :value="orderDetail.refund_reason||''"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-p-30 bottom-action" v-if="orderDetail.status==-6">
			<u-button type="default" :customStyle="customBtnStyle" plain hover-class="none" shape="circle" class="action-btn"
				@click="toServer">联系客服</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepList: [{
						name: '申请退款',
						title: '申请退款'
					},
					{
						name: '处理中',
						title: '退款处理中'
					}, {
						name: '财务退款',
						title: '退款成功'
					}, {
						name: '已完成',
						title: '退款成功'
					},
				],
				step: 0,
				orderId: '',
				orderDetail: {},
				refundStatus: [],
				customBtnStyle: {
					borderColor: "#cccccc",
					color: '#999999'
				},
			}
		},
		onLoad(e) {
			this.orderId = e.id
			this.queryOrderDetail()
		},
		onPullDownRefresh() {
			this.queryOrderDetail()
		},
		methods: {
			queryOrderDetail() {
				this.$u.api.refundProgress(this.orderId).then(res => {
					uni.stopPullDownRefresh()
					this.orderDetail = res;
					this.step = res.refund_status
					this.refundStatus = res.refund_progress.reverse()
					this.$nextTick(() => {
						this.$refs.uReadMore.init();
					})
				})
			},
			// 客服
			toServer() {
				this.$u.route('/pages/subpage/about/service')
			},
		}
	}
</script>

<style scoped lang="scss">
	.page-view {
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.top {
			background-image: linear-gradient(169deg, rgba(30, 217, 79, 0.36) 0%, #1ED996 54%, rgba(30, 217, 79, 0.62) 100%);
			background-repeat: no-repeat;
			background-size: cover;
			position: sticky;
			top: 0;
			z-index: 99;
		}

		.steps-box {
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding: 35rpx 0;
		}

		.page-content {
			padding-bottom: 180rpx;
			flex: 1;
			height: 0;
		}

		.u-node {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
		}
	}

	.bottom-action {
		position: sticky;
		bottom: 0;
		background-color: #fff;
		height: 180rpx;
		z-index: 99;
		display: flex;
		justify-content: flex-end;
	}

	.action-btn {
		margin-left: 20rpx;
	}
</style>